<template>
    <div class="text-group">
        <!--组件容器-->
        <div class="input-group" :class="{'is-invalid':error}">
            <!--输入框-->
            <input class="frame" :type="type" onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )'
                   :value="value"
                   :placeholder="placeholder"
                   :name="name"
                   @input="$emit('input',$event.target.value)"
                   @change="$emit('handleInputChange')">
            <!--后面的按钮-->
            <button class="obtion" v-if="btnTitle" :disabled="disabled" @click="$emit('btnClick')">
            {{btnTitle}}</button>
        </div>
        <!--错误提醒-->
        <div v-if="error" class="invalid-feedback">{{error}}</div>
    </div>
</template>

<script>
export default {
  name: 'InputGroup',
  props: {
    type: {
      type: String,
      default: 'text'
    },
    value: String,
    placeholder: String,
    name: String,
    btnTitle: String,
    disabled: Boolean,
    error: String
  }
}
</script>

<style lang="stylus" scoped>
    .input-group
       height: .4rem
       border: 1px solid #ccc
       border-radius: 4px
       display: flex
       line-height:.5rem
       flex-wrap: wrap
       padding: 10px
       text-align: center
       .frame
         width: 80%
         height: .4rem
         outline: none
        input::-webkit-outer-spin-button,input::-webkit-inner-spin-button
        -webkit-appearance: none !important
        margin: 0
       .input-group button
         border: none
         outline: none
         background: #ffffff
         .input-group button[disabled]
           color: #aaa
      .is-invalid
        border: 1px solid red
      .invalid-feedback
        color: red
        padding-top: 5px
    .obtion
      background: red
      color: white
</style>
